<template>
    <div class="">
        <el-radio-group v-model="radio" class="radioGroup">
            <el-radio :label="item.id"  v-for="(item,index) in moduleList" :key="index" @change="changeList(item)">{{ item.status?item.programmeName+'★':item.programmeName}}</el-radio>
            <el-button type="primary" v-if="moduleList.length<5" @click="addModule()">增加方案</el-button>
            <el-button type="primary" disabled v-else >当前最多只可容纳5个方案</el-button>
        </el-radio-group>
        <div class="preview">
            <div class="operate">
                <div class="tools" v-if="status==1">
                    <!-- //1当前选中的是正在投放在大屏上的    2这是最普通的存货方案     3这是刚刚建好的还没有保存的案例 -->
                    <el-input class="input" v-model="moduleObj.programmeName" placeholder="请给当前案例去取一个名字">
                        <template slot="prepend">方案名</template>
                    </el-input>
                    <el-button type="primary" @click="submitToCase()" v-if="moduleList.length<5">另存为新方案</el-button>
                    <el-button type="primary" @click="updateToCase()">保存修改并应用至大屏</el-button>
                </div>
                <div class="tools" v-if="status==2">
                    <!-- //1当前选中的是正在投放在大屏上的    2这是最普通的存货方案     3这是刚刚建好的还没有保存的案例 -->
                    <el-input class="input" v-model="moduleObj.programmeName" placeholder="请给当前案例去取一个名字">
                        <template slot="prepend">方案名</template>
                    </el-input>
                    <el-button type="primary" @click="updateToCase()">保存修改至当前方案</el-button>
                    <el-button type="primary" @click="submitToCase()" v-if="moduleList.length<5">另存为新方案</el-button>
                    <el-button type="primary" @click="toBigScreen()">应用至大屏</el-button>
                    <el-button type="primary" @click="deleteCase()">删除该方案</el-button>
                </div>
                <div class="tools" v-if="status==3">
                    <!-- //1当前选中的是正在投放在大屏上的    2这是最普通的存货方案     3这是刚刚建好的还没有保存的案例 -->
                    <el-input class="input" v-model="moduleObj.programmeName" placeholder="请给当前案例去取一个名字">
                        <template slot="prepend">方案名</template>
                    </el-input>
                    <el-button type="primary" @click="submitToCase()">保存至新案例</el-button>
                </div>
                
                <div class="topPart" style="margin-top: 10px">
                    <span style="margin-right: 10px;">大屏标题名</span>
                    <el-input class="input" v-model="moduleObj.name"></el-input>
                    <el-checkbox v-model="moduleObj.isBanner">开启条幅模式</el-checkbox>


                </div>
                <div class="topPart" style="margin-top: 10px">
                    <span style="margin-right: 10px;">大屏logo上传</span>

                    <el-upload
                        v-if="status==3"
                        disabled
                        action=""
                        :limit="1"
                        :data="{'programmeId': moduleObj.id}"
                        :headers="{'cloud-Auth-Token': token}"
                        :before-upload="beforeUpload"
                        :on-success="successUpload">
                        <el-image
                            class="table-td-logo"
                            :src="moduleObj.fileUrl"
                            slot="trigger"
                           
                        ></el-image>
                        <span style="font-size:12px">当前方案尚未保存，请及时保存之后才可以上传logo</span>
                    </el-upload>

                    <el-upload
                        v-else
                        action="/flag/screen/vFilePhysicsInfo/uploadServiceLogo"
                        :limit="1"
                        :data="{'programmeId': moduleObj.id}"
                        :headers="{'cloud-Auth-Token': token}"
                        :before-upload="beforeUpload"
                        :on-success="successUpload">
                        <el-image
                            class="table-td-logo"
                            :src="moduleObj.fileUrl"
                            slot="trigger"
                           
                        ></el-image>
                        <span style="font-size:12px">点击图片可以重新上传logo</span>
                    </el-upload>


                </div>
            </div>
            <div class="module">
                <div class="part" style="left: 50px;top:0px;width: 1820px;height: 80px;color: #fff" :style="{'background-color': moduleObj.isBanner?'#f00':'#001254'}">{{moduleObj.name}}</div>
                <div class="part" style="left: 50px;top:0px;width: 200px;height: 80px;color: #fff;background-color: #67c23a">这里是logo</div>
                <template v-for="(item,index) in moduleObj.programmeInfoViewList" >
                    <VueDraggableResizable
                        :snap="true"
                        :snapTolerance="10"
                        @refLineParams="getRefLineParams"
                        :key="index"
                        class="part"
                        :w="item.width"
                        :h="item.height"
                        :x="item.assemblyX"
                        :y="item.assemblyY"
                        :min-width="50"
                        :min-height="50"
                        :parent="true"
                        :grid="[1,1]"
                        class-name="dragging1"
                        @activated="onActivated(index)"
                        @dragstop="onDrag"
                        @resizestop="onResize"
                    >
                        <div class="index" :style="{'background-color': bgColorList[index]}">{{index}}</div>
                        <img style="width: 100%;height: 100%" :src="item.assemblyImg" alt="">
                    </VueDraggableResizable>
                </template>
                <span class="ref-line v-line"
                    v-for="(item,index) in vLine"
                    :key="index+'_vLine'"
                    v-show="item.display"
                    :style="{ left: item.position, top: item.origin, height: item.lineLength}"
                />
                <span class="ref-line h-line"
                    v-for="(item,index) in hLine"
                    :key="index+'_hLine'"
                    v-show="item.display"
                    :style="{ top: item.position, left: item.origin, width: item.lineLength}"
                />
            </div>
            <div class="operate">
                <div style="margin-top: 10px;color:red;">
                    每张图表组件仅可使用一次！ 重复使用将导致页面显示错误。
                </div>
                <el-table
                :key="1"
                    :data="moduleObj.programmeInfoViewList"
                    style="width: 100%">
                    <el-table-column type="index" width="50">
                        <template slot-scope="scope">
                            <div class="index" :style="{'background-color': bgColorList[scope.$index]}">{{scope.$index}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="缩略图" align="center">
                        <template slot-scope="scope">
                            <el-image
                                class="table-td-logo"
                                :src="scope.row.assemblyImg"
                                :preview-src-list="[scope.row.assemblyImg]"
                            ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="assemblyName" label="组件名称" align="center"></el-table-column>
                    <el-table-column label="定位X" align="center">
                        <template slot-scope="scope">
                            <el-input class="input" v-model.number="scope.row.assemblyX" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="定位Y" align="center">
                        <template slot-scope="scope">
                            <el-input class="input" v-model.number="scope.row.assemblyY" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="模块宽" align="center">
                        <template slot-scope="scope">
                            <el-input class="input" v-model.number="scope.row.width" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="模块高" align="center">
                        <template slot-scope="scope">
                            <el-input class="input" v-model.number="scope.row.height" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="切换图表组件" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" plain @click="showList(scope.$index,scope.row)">切换图表组件</el-button>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="配置信息" align="center">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="showConfiguration(scope.$index, scope.row)">配置明细</el-button>
                            
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </div>

        <el-dialog title="切换组件" :visible.sync="changeVisible" width="600px" :center="true">
            <el-table
                
                ref="multipleTable"
                :data="chartList"
                :max-height="450"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                @select="select"
                @select-all="selectAll">
                <el-table-column
                    type="selection"
                    width="55"
                    :selectable="selectable"
                    >
                </el-table-column>
                <el-table-column type="index" width="50" align="center"></el-table-column>
                <el-table-column prop="assemblyName" label="组件名称" align="center"></el-table-column>
                <el-table-column label="缩略图" align="center">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-logo"
                            :src="scope.row.assemblyImg"
                            :preview-src-list="[scope.row.assemblyImg]"
                            :z-index="100000"
                        ></el-image>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="changeVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeChart">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="新增大屏显示方案" :visible.sync="addVisible" width="600px">
            <el-dialog
                width="800px"
                title="方案预览图"
                :visible.sync="innerVisible"
                append-to-body>
                <el-image
                    style="width:100%;"
                    :src="innerImg"
                ></el-image>
            </el-dialog>
            <div class="word"><span>→</span> 第一步：选择大屏上显示的组件个数，组件个数仅在方案创建时确定，数量选定后无法变更。</div>
            <div class="word"><span style="color: #fff">→</span>第二步：调整每个组件的大小，配置其在大屏上的位置，设定屏幕布局。</div>
            <div class="word"><span style="color: #fff">→</span>第三步：配个组件都可以更换和配置，组件配置仅在当前方案有效。</div>
            <el-table
                ref="multipleTable"
                :data="allModuleList"
                :max-height="450"
                style="width: 100%;margin-top: 10px"
                >
                <el-table-column type="index" width="50" align="center"></el-table-column>
                <el-table-column prop="programmeName" label="大屏组件个数" align="center"></el-table-column>
                <el-table-column label="布局示意图" align="center">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-logo"
                            :src="scope.row.programmeImg"
                            @click="innerVisible = true;innerImg=scope.row.programmeImg"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleAdd(scope.$index, scope.row)">选定</el-button>
                        </template>
                    </el-table-column>
            </el-table>
        </el-dialog>


        <el-dialog title="组件配置" :visible.sync="dialogFormVisible" width="800px">
            <el-form :model="form" v-if="form.type">
                <el-form-item label="第三方组件标题" :label-width="'200px'">
                    <el-input v-model="form.authUrl" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="第三方组件URL" :label-width="'200px'">
                    <el-input v-model="form.apiUrl" autocomplete="off"></el-input>
                </el-form-item>
                
                <el-divider><span style="font-size:12px">(非必选)第三方组件如果需要先认证，请输入所需的认证账号、密码、以及负责认证的接口(功能暂未开放)：</span></el-divider>
                <el-form-item label="第三方认证账号" :label-width="'200px'">
                    <el-input disabled v-model="form.authUsername" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="第三方认证密码" :label-width="'200px'">
                    <el-input disabled v-model="form.authPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="第三方认证接口URL" :label-width="'200px'">
                    <el-input disabled autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="form" v-else>
                <el-form-item label="刷新间隔时长(分钟)" :label-width="formLabelWidth">
                    <el-input v-model="form.schedule" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div style="font-size:12px;color:#f00">配置之后要等进行保存操作之后才可以生效哦</div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false; form = {}">取 消</el-button>
                <el-button type="primary" @click="submitConfiguration()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
import { showLoading, hideLoading } from '../../utils/loading';
export default {
    name: 'workbench',
    data() {
        return {
            VueDraggable: 0,
            mList: [],
            moduleList: [],
            moduleObj: {},
            radio: 0,
            changeVisible: false,
            addVisible: false,
            innerVisible:false,
            innerImg: '',
            dialogFormVisible: false,
            form: {},
            allModuleList: [],
            status: 1, //1当前选中的是正在投放在大屏上的    2这是最普通的存货方案     3这是刚刚建好的还没有保存的案例
            keyIndex: 0,
            multipleSelection: [],
            chartList: [],
            idList: [],
            bgColorList: ['rgb(160, 167, 230)','rgb(196, 235, 173)','rgb(147, 183, 227)','rgb(237, 175, 218)','rgb(165, 231, 240)','rgb(242, 214, 67)','rgb(217, 88, 80)','rgb(78, 163, 151)','rgb(245, 232, 200)','rgb(107, 230, 193)','rgb(188 192 206)','rgb(171 132 173)','rgb(176 96 255)','rgb(96 236 255)','rgb(96 255 164)','rgb(255 137 96)'],
            vLine: [],
            hLine: [],
            formLabelWidth: '140px',


            fileName: '',
            files: '',
            fileList: [],
            token: localStorage.getItem('cloud-Auth-Token'),
        };
    },
    components: {
        VueDraggableResizable
    },
    computed: {
        role() {
            
        }
    },
    created() {
        // console.log(this.radio)
        this.getModule();  // 先获取自己配置好的方案  刚注册的，默认一个方案再里面，再module里面有状态status来判断，当前配置保存的方案是否正在大屏上显示   module里面必有一个正在显示的 
    },
    methods: {
        changeList(item) {  // 切换方案  重组
            // console.log(this.radio,item)
            showLoading();
            
            this.moduleObj={};
            setTimeout(() => {
                this.moduleObj = item;
                if(item.status && !item.newOne){this.status = 1;}
                if(!item.status && !item.newOne){this.status = 2;}
                if(item.newOne){this.status = 3;}
                hideLoading();
            }, 500);
            
            this.idList = [];
            let info = item.programmeInfoViewList;
            for(let i=0;i<info.length;i++){
                this.idList.push(info[i].assemblyId)
            }

        },

        getModule() {// 获取已有方案的列表
            showLoading();
            const u = '/screen/screenModel/queryModelList?serviceId=1';
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
            .then((res)=>{
                if(res.data.code == 200){
                    this.moduleList = res.data.data;
                    for(let i=0;i<this.moduleList.length;i++){
                        if(this.moduleList[i].status){
                            this.radio = this.moduleList[i].id;
                            // this.moduleObj = this.moduleList[i];
                            this.status =1;
                            this.changeList(this.moduleList[i])
                        }
                    }
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((err)=>{
                console.log(err);
            });


          
        },
        showList(i,item) {
            this.keyIndex = i;
            this.getList();
        },
        getList() { // 获取组件列表
            showLoading();
            const u = '/screen/assembly/queryAssemblyListInfo';
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
            .then((res)=>{
                if(res.data.code == 200){
                    this.chartList =  res.data.data;
                    this.changeVisible = true;
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((err)=>{
                console.log(err);
            });
        },
        changeChart() {
            if(this.multipleSelection.length == 0){

            }else {
                let form = this.multipleSelection[0];
                
                form.assemblyX = this.moduleObj.programmeInfoViewList[this.keyIndex].assemblyX;
                form.assemblyY = this.moduleObj.programmeInfoViewList[this.keyIndex].assemblyY;
                form.width = this.moduleObj.programmeInfoViewList[this.keyIndex].width;
                form.height = this.moduleObj.programmeInfoViewList[this.keyIndex].height;
                form.layoutId = this.moduleObj.programmeInfoViewList[this.keyIndex].layoutId;
                form.userId = this.moduleObj.programmeInfoViewList[this.keyIndex].userId;
                form.assemblyConfigureId = this.moduleObj.programmeInfoViewList[this.keyIndex].assemblyConfigureId;
                form.assemblyId = form.id;

                if(form.type && this.moduleObj.programmeInfoViewList[this.keyIndex].type) {  //3->3
                    form.authUrl = this.moduleObj.programmeInfoViewList[this.keyIndex].authUrl;
                    form.apiUrl = this.moduleObj.programmeInfoViewList[this.keyIndex].apiUrl;
                    form.authUsername = this.moduleObj.programmeInfoViewList[this.keyIndex].authUsername;
                    form.authPassword = this.moduleObj.programmeInfoViewList[this.keyIndex].authPassword;
                } 
                if(form.type && !this.moduleObj.programmeInfoViewList[this.keyIndex].type) {  //1->3
                    // form.authUrl =  this.moduleObj.programmeInfoViewList[this.keyIndex].authUrl;
                    // form.apiUrl =  this.moduleObj.programmeInfoViewList[this.keyIndex].apiUrl;
                    form.authUsername = '';
                    form.authPassword = '';
                }
                if(!form.type && !this.moduleObj.programmeInfoViewList[this.keyIndex].type) {//1->1
                    form.schedule = this.moduleObj.programmeInfoViewList[this.keyIndex].schedule;
                }
                if(!form.type && this.moduleObj.programmeInfoViewList[this.keyIndex].type) {//3->1
                    form.schedule = 10
                }
                // type  // 0 普通   1  第三方
                
                this.moduleObj.programmeInfoViewList[this.keyIndex] = form; 

                this.idList = [];
                let info = this.moduleObj.programmeInfoViewList;
                for(let i=0;i<info.length;i++){
                    this.idList.push(info[i].assemblyId)
                }
                this.moduleObj.programmeInfoViewList.splice(1,0);

                console.log('this.idList',this.idList)
            }
            this.changeVisible = false;
            
           
        },

        //  组件列表筛查 start
        selectable(row,index){  
            if(this.idList.includes(row.id)){
                return false;
            }else{
                return true;
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        select(selection, row) {
            if (selection.length > 1) {
                let del_row = selection.shift()
                this.$refs.multipleTable.toggleRowSelection(del_row, false)
            }
        },
        selectAll(selection){
            if (selection.length > 1) {
                selection.length = 1
            }
        },
        //  组件列表筛查 end

        //  组件移动定位 start
        getRefLineParams (params) {  //移动的辅助线
            const { vLine, hLine } = params
            this.vLine = vLine
            this.hLine = hLine
        },
        onActivated(index) {
            this.VueDraggable = index;
        },
        onResize: function(x,y,w,h) {
            this.moduleObj.programmeInfoViewList[this.VueDraggable].assemblyX = x;
            this.moduleObj.programmeInfoViewList[this.VueDraggable].assemblyY = y;
            this.moduleObj.programmeInfoViewList[this.VueDraggable].width = w;
            this.moduleObj.programmeInfoViewList[this.VueDraggable].height = h;
        },
        onDrag: function(x,y) {
            this.moduleObj.programmeInfoViewList[this.VueDraggable].assemblyX = x;
            this.moduleObj.programmeInfoViewList[this.VueDraggable].assemblyY = y;
        },
        //  组件移动定位 end

    
        


        //配置信息
        showConfiguration(index, item, key) {
            // item.type   1是第三方  0是普通
            
            this.form = item;
            this.dialogFormVisible = true;
        },
        submitConfiguration() {
            this.dialogFormVisible = false;
            let list = this.moduleObj.programmeInfoViewList;
            for(let i=0;i<list.length;i++){
                if(list.assemblyConfigureId==this.form.assemblyConfigureId) {
                    this.moduleObj.programmeInfoViewList[i]=this.form;
                    break;
                }
            }
            
            this.moduleObj.programmeInfoViewList.splice(1,0);
        },
        

        addModule() {
            showLoading();
            const u = '/screen/screenModel/queryModelList';
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
            .then((res)=>{
                if(res.data.code == 200){
                    this.allModuleList = res.data.data;
                    this.addVisible =true;
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((err)=>{
                console.log(err);
            });
        },
        handleAdd (index,item) {
            item.newOne = true;
            this.moduleList.push(item);
            this.radio = item.id;
            item.programmeName = '新增' +item.programmeName;
            // this.moduleObj = item;
            this.addVisible =false;
            this.status = 3;
            this.changeList(item)
        },
        submitToCase() {
            showLoading();
            let params = this.moduleObj;
            params.status=false;
            const url = '/screen/screenUser/addProgramme';
            const headers = {
                'Content-Type': 'application/json;charset=UTF-8',
                'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')
            };
            this.$axios.post(url, params, {headers}).then((res) => {
                if(res.data.code == 200){
                    this.$message.success(res.data.msg);
                    this.getModule();
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((error) => {
                console.warn(error);
            });
        },

        toBigScreen() {
            this.$confirm('应用至大屏之前需要确保您的操作已经全部被保存，请问现在是否继续应用?', '提示', {
                confirmButtonText: '应用至大屏',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                showLoading();
                let params = this.moduleObj;
                params.status = true;
                console.log(params)
                const url = '/screen/screenModel/setApplication';
                const headers = {
                    'Content-Type': 'application/json;charset=UTF-8',
                    'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')
                };
                this.$axios.post(url, params, {headers}).then((res) => {
                    if(res.data.code == 200){
                        this.$message.success(res.data.msg);
                        this.getModule();
                    }else{
                        this.$message.error(res.data.msg);
                    };
                    hideLoading();
                }).catch((error) => {
                    console.warn(error);
                });
            }).catch(() => {
                this.$message({
                    type: 'warning',
                    message: '应用之前请先保存'
                });          
            });
        },
        
        deleteCase() {
            this.$confirm('请确定是否删除该方案?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                showLoading();
                const u = '/screen/screenModel/deleteProgramme?id='+this.moduleObj.id;
                this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
                .then((res)=>{
                    if(res.data.code == 200){
                        this.getModule();
                    }else{
                        this.$message.error(res.data.msg);
                    };
                    hideLoading();
                }).catch((err)=>{
                    console.log(err);
                });
            }).catch(() => {
                this.$message({
                    type: 'warning',
                    message: '应用之前请先保存'
                });          
            });

            
        },

        updateToCase() {
            let str = '请确认是否保存当前数据';
            this.$confirm(str, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.disposeUserModel();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });

        },
        disposeUserModel() {
            showLoading();
            let params = this.moduleObj
            const url = '/screen/screenUser/updateProgramme';
            const headers = {
                'Content-Type': 'application/json;charset=UTF-8',
                'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')
            };
            this.$axios.post(url, params, {headers}).then((res) => {
                if(res.data.code == 200){
                    this.$message.success(res.data.msg);
                    this.getModule();
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((error) => {
                console.warn(error);
            });
        },

        // 上传图片之前的验证操作
        beforeUpload(file){
     
            this.files = file;
            const extension = file.name.split('.')[1] === 'png';
            const isLt2M = file.size / 1024  < 500;
            // if (!extension) {
            //     this.$message.warning(`上传图片只能是 png 格式!`);
            //     return false
            // }

            if (!isLt2M) {
                this.$message.warning(`上传图片大小不能超过 500K!`);
            
                return false
            }
            this.fileName = file.name;
            // this.submitUpload();
            return true // 返回false不会自动上传

        },
        successUpload(res) {
            this.$message.success(res.msg);
            this.getModule();
        },

    }
};
</script>


<style scoped lang="less">
.table-td-logo {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.topPart {
    display: flex;
    align-items: center;
    .input {
        width: fit-content;
        margin-right: 10px;
    }
    margin-bottom: 10px;
}
.radioGroup {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}
.preview {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 20px;
    .module {
        width: 1920px;
        height: 1080px;
        background-color: #001254;
        background-size: contain;
        position: relative;
        transform: scale(0.75);
        transform-origin:right bottom;
        box-sizing: border-box;
        margin-top: -270px;
        margin-left: -480px;
        .part {
            border: 1px solid #7ef0ff;
            box-sizing: border-box;
            position: absolute;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            .index {
                z-index: 100;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -25px;
                margin-top: -25px;
            }
        }
    }
    .event {
        width: 1920px;
        height: 1080px;
    }
    .operate {
        width: 100%;
        .list {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 10px;
            box-sizing: border-box;
            margin-top: 10px;
            border-bottom: 1px solid rgb(218, 218, 218);
            
            .img {
                width: 40px;
                height: 40px;
                vertical-align: middle;
            }
            .input {
                width: 200px;
            }

        }
        .index {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-radius: 50%;
            font-size: 20px;
        }
    }
    .tools {
        width: 100%;
        margin-top: 10px;
        text-align: right;
        .input {
            width: fit-content;
            margin-right: 10px;
        }
    }
}
.word {
    font-size: 16px;
    span {
        width: 30px;

    }
}

.preview /deep/ .el-upload--text {
    width: 100px;
    height: 40px;
}

/deep/ .el-image-viewer__wrapper {
    z-index: 2000000;
}
</style>
